<template>
  <div
    class="xuanfu"
    ref="ball"
    id="moveDiv"
    @mousedown="down"
    @touchstart="down"
    @mousemove.stop.prevent="move"
    @touchmove.stop.prevent="move"
    @mouseup="end"
    @touchend="end"
  >
    <img :src="src" alt="" width="50" @click="go()">
    <div class="model" v-show="isShow">
      <div class="bg"></div>
      <div class="modelContent">
        <img src="../../assets/close.png" alt="" width="15" @click="isShow=false" class="close">
        <ul class="list">
          <li><img src="../../assets/tell.png" alt="" width="22">{{tellPhone}}</li>
          <li>{{callTip}}</li>
        </ul>
        <p class="btn">
          <button class="call" @click="goCallTellPhone(tellPhone)">拨打</button>
          <button class="cancel" @click="goCancel()">取消</button>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
  import {getKefuinfo} from '../../../test/unit/http'
  export default {
    name: "kefususpend",
    data() {
      return {
        src: require('../../assets/tell3.png'),
        flags: false,
        moveDiv: '',
        position: {x: 0, y: 0},
        nx: '',
        ny: '',
        dx: '',
        dy: '',
        xPum: '',
        yPum: '',
        isShow: false,
        callTip: "是否拨打?",
        tellPhone: '400-0713-000',
      };
    },
    components: {},

    computed: {},

    created() {
      this.getKefuInfoData({});
    },
    mounted() {
      this.moveDiv = this.$refs.ball;
    },
    methods: {
      // 实现移动端拖拽
      down() {
        this.flags = true;
        let touch;
        if (event.touches) {
          touch = event.touches[0];
        } else {
          touch = event;
        }
        this.position.x = touch.clientX;
        this.position.y = touch.clientY;
        this.dx = this.moveDiv.offsetLeft;
        this.dy = this.moveDiv.offsetTop;
      },
      move() {
        if (this.flags) {
          let touch;
          if (event.touches) {
            touch = event.touches[0];
          } else {
            touch = event;
          }
          this.nx = touch.clientX - this.position.x;
          this.ny = touch.clientY - this.position.y;
          this.xPum = this.dx + this.nx;
          this.yPum = this.dy + this.ny;
          let LimitX =
            document.documentElement.clinetWidth || document.body.clientWidth;
          let limitY =
            document.documentElement.clientHeight || document.body.clientHeight;
          if (
            this.xPum < 0 ||
            this.yPum < 0 ||
            this.xPum > LimitX - this.moveDiv.offsetWidth ||
            this.yPum > limitY - this.moveDiv.offsetHeight
          ) {
            return false;
          }
          this.moveDiv.style.left = this.xPum + 'px';
          this.moveDiv.style.top = this.yPum + 'px';
          //阻止页面的滑动默认事件；如果碰到滑动问题，1.2 请注意是否获取到 touchmove
          document.addEventListener(
            'touchmove',
            function () {
              event.preventDefault();
            },
            false
          );
        }
      },
      //鼠标释放时候的函数
      end() {
        this.flags = false;
      },
      go() {
        this.isShow = true
      },
      goCancel() {
        this.isShow = false;
      },
      goCallTellPhone(tellPhone) {
        window.location.href = 'tel://' + tellPhone
      },
      getKefuInfoData(params){
        var that =this;
        getKefuinfo(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            that.tellPhone=res.object.HoursHotline24.configVal;
          }
        })
      },
    }
  };
</script>


<style lang="less" scoped>
  .xuanfu {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    position: fixed;
    right: 0px;
    bottom: 200px;
    text-align: center;
    line-height: 48px;
    animation: myfirst 7s infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
  }
  @keyframes myfirst {
    0% {
      top: 35%;
    }
    100% {
      top: 85%;
    }
  }

  .model .modelContent {
    background-color: #fff;
    border-radius: 8px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -43%;
    margin-top: -111px;
    z-index: 99;
    padding: 30px 10px 20px;
    width: 80%;
    font-size: 16px;
    color: #111;

    .close {
      position: absolute;
      right: 10px;
      top: 10px
    }

    div {
      text-align: left;
      width: 75%;
      margin: 20px auto;
    }

    .list {
      font-size: 15px;
      margin-bottom: 20px;

      li:first-child {
        color: #56a7ed;
        margin-bottom: 5px;

        img {
          vertical-align: middle;
          margin-right: 5px;
        }
      }
    }

    .btn {
      button {
        height: 42px;
        line-height: 42px;
        color: #fff;
        outline: none;
        border: none;
        width: calc(50% - 20px);
        border-radius: 8px;
      }

      :first-child {
        background-color: #ccc;
        margin-right: 20px;
      }

      :last-child {
        background-color: #fc8c50;
      }

      .call {
        background-color: #2e94f0;
      }

      .cancel {
        background-color: #ccc;
      }
    }
  }
</style>
}
